<template>
  <div class="password-form">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
          <el-form-item prop="account" label="用户名">
            <el-input v-model="ruleForm.account" placeholder="用户名：" disabled></el-input>
          </el-form-item>
          <el-form-item prop="oldPassword" label="旧密码">
            <el-input v-model="ruleForm.oldPassword" type="password" placeholder="请输入旧密码" show-password> </el-input>
          </el-form-item>
          <el-form-item prop="newPassword" label="新密码">
            <el-input v-model="ruleForm.newPassword" type="password" placeholder="请输入新密码" show-password> </el-input>
          </el-form-item>
          <el-form-item prop="confirmNewPassword" label="确认新密码">
            <el-input v-model="ruleForm.confirmNewPassword" type="password" placeholder="请确认新密码" show-password> </el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-button type="primary" @click="handleConfirm(ruleFormRef)">更新密码</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue"
import { ElMessage } from "element-plus"
import type { ElForm } from "element-plus"
import { useRouter } from "vue-router"
import { LOGIN_URL } from "@/config"
import { modifyPasswordApi } from "@/api/modules/login"
import { encryptDes } from "@/utils/des"
import { useUserStore } from "@/stores/modules/user"

const router = useRouter()
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

interface RuleForm {
  account: string
  oldPassword: string
  newPassword: string
  confirmNewPassword: string
}
type FormInstance = InstanceType<typeof ElForm>

const ruleFormRef = ref<FormInstance>()
const rules = {
  oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  confirmNewPassword: [{ required: true, message: "请确认新密码", trigger: "blur" }]
}
const loading = ref(false)
const ruleForm = ref<RuleForm>({
  account: "",
  oldPassword: "",
  newPassword: "",
  confirmNewPassword: ""
})

/** 按钮 确定 */
const handleConfirm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (!valid) return
    if (ruleForm.value.newPassword !== ruleForm.value.confirmNewPassword) {
      ElMessage.error("两次密码不一致！")
      return
    }
    loading.value = true
    // 1.执行接口
    let formCopy = JSON.parse(JSON.stringify(ruleForm.value))
    formCopy.oldPassword = encryptDes(formCopy.oldPassword)
    formCopy.newPassword = encryptDes(formCopy.newPassword)
    await modifyPasswordApi(formCopy)
    loading.value = false
    ElMessage.success("修改成功！")
    // 2.清除数据
    window.localStorage.clear()
    userStore.setToken("")
    // 3.重定向到登陆页
    setTimeout(() => {
      router.replace(LOGIN_URL)
    }, 800)
  })
}

onMounted(() => {
  ruleForm.value.account = userInfo.value.account as string
})
</script>

<style scoped lang="scss">
.password-form {
  padding: 0 20px;
}
</style>
